<template>
  <div>
    <BaseModal submitText="完成" @onSubmit="onClose" @onClose="onClose" :show="show" title="选择课程">
      <searchbar>
        <el-input @change="getList" v-model="search.course_name" placeholder="请输入课程名称"></el-input>
        <el-button class="search-btn" @click="getList" type="primary">查询</el-button>
      </searchbar>
      <div class="table-title" >
        <div style="flex:2;">课程名称</div>
      </div>
      <div @click="onChoice(c)" class="table-column image-item" v-for="(c, i) in list" :key="'course' + i" >
        <div class="flex-row-around" style="flex:2;">
          <p>{{c.course_name}}</p>
        </div>
      </div>
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        @current-change="getList"
        :current-page.sync="search.page"
        :page-size="search.page_size"
        :total="total"
      ></el-pagination>
    </BaseModal>
  </div>
</template>
<script>
import modalClose from "@/mixins/modalClose";
import { courseModel } from "@/api/models";
import Searchbar from '../components/Searchbar.vue';
export default {
  mixins: [modalClose],
  components: {Searchbar},
  data() {
    return {
      search: {
        course_name: '',
        page: 1,
        page_size: 10,
        get_public: '2'
      },
      list: [],
      total: 0
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      courseModel.list(this.search, res => {
        this.list = res.data;
      });
    },
    onChoice(c) {
      this.$emit('onSubmit', c)
    },
    onClose() {
      this.$emit("onClose");
    }
  }
};
</script>
<style lang="scss">
  .image-item{
    cursor: pointer;
  }
</style>